<template>
  <div class="memberGroup">
    <div class="head">
      <div class="title">
        <span>会员分群</span>
        <!-- <span class="tip">*数据每日更新一次，最后一次数据更新时间：2022-02-01 00:30</span> -->
      </div>
      <div>
        <el-button v-if="judgeOpen != 1" type="primary" style="margin: 10px;" @click="judgeOpenBtn">开通</el-button>
        <el-button v-else type="primary" @click="handleEdit">会员分群设置</el-button>
      </div>
    </div>

    <div v-if="judgeOpen == 1" class="lisBox">
      <div v-for="(item, index) in RfmData" :key="index" class="list">
        <div class="title">
          <span>{{ item.groupName }}</span>
          <span class="num">人群总数：{{ item.memberCount ? item.memberCount : 0 }}</span>
        </div>
        <div v-if="index == 0" class="txt">近{{ item.groupConfigs[0].conditionValue }}天有消费</div>
        <div v-if="index == 1" class="txt">近{{ item.groupConfigs[0].conditionValue }}天有消费； 近{{ item.groupConfigs[1].conditionValue }}天无消费</div>
        <div v-if="index == 2" class="txt">近{{ item.groupConfigs[0].conditionValue }}天有消费；近{{ item.groupConfigs[1].conditionValue }}天无消费</div>
        <div v-if="index == 3" class="txt">非会员顾客</div>
        <div v-if="index == 4" class="txt">入会以来未完成消费</div>
        <div v-if="index == 5" class="txt">入会以来仅完成1次消费</div>
        <div v-if="index == 6" class="txt">近{{ item.groupConfigs[0].conditionValue }}天有加过购物车；近{{ item.groupConfigs[1].conditionValue }}天无消费</div>
        <div v-if="index == 7" class="txt">近{{ item.groupConfigs[0].conditionValue }}天有下过单；近{{ item.groupConfigs[1].conditionValue }}天无消费</div>
        <div v-if="index != 3" class="toSet" @click="toSetBtn(index)">去运营</div>
        <div v-if="index == 3" class="toSet" :class="{disableClass: index == 3}">敬请期待！</div>
      </div>
      <div v-if="(RfmData.length % 2) == 0" class="list" style="border: none;" />
    </div>

    <RfmConfigDialog ref="RfmConfigDialog" @RfmForm="getRfmForm" />
  </div>
</template>

<script>
import { selectMemberGroups, judgeOpenRfm } from '@/api/vip'
import RfmConfigDialog from './RfmConfigDialog'
export default {
  components: {
    RfmConfigDialog
  },
  data() {
    return {
      RfmData: '',
      judgeOpen: null
    }
  },
  mounted() {
    this.judgeOpenRfmFun()
  },
  methods: {
    handleEdit() {
      this.$refs.RfmConfigDialog.edit()
    },

    /* 接收RFM配置 */
    judgeOpenRfmFun() {
      judgeOpenRfm().then(res => {
        this.judgeOpen = res.data
        if (this.judgeOpen == 1) {
          this.getMemberGroupsFun()
        }
      })
    },
    getRfmForm(e) {
      this.RfmData = e
      this.getMemberGroupsFun()
    },
    // 获取会员分群列表
    getMemberGroupsFun() {
      selectMemberGroups().then(res => {
        this.RfmData = res.data
      })
    },
    // 去运营
    toSetBtn(index) {
      this.$router.push({
        name: 'VipList',
        params: {
          groupId: this.RfmData[index].id
        }
      })
    },
    judgeOpenBtn() {
      this.$router.push({
        name: 'PlugCenterList'
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.memberGroup {
	width: 100%;
	padding: 20px 40px;
	box-sizing: border-box;
	background-color: white;
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		overflow: hidden;
		align-items: center;
		.title {
			font-size: 24px;
			span {
				float: left;
			}
			.tip {
				font-size: 14px;
				color: #ccc;
				margin-left: 20px;
				margin-top: 5px;
			}
		}
	}
	.lisBox {
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 30px;
		.list {
			width: 30%;
			min-height: 213px;
			border: 1px solid $primary;
			border-radius: 8px;
			margin-bottom: 40px;
			overflow: hidden;
			position: relative;
			word-wrap: break-word;
			.title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 16px;
				box-sizing: border-box;
				.num {
					font-size: 14px;
				}
			}
			.txt {
				font-size: 14px;
				margin: 26px 0;
				padding: 0 16px;
				box-sizing: border-box;
			}
			.toSet {
				text-align: center;
				background-color: $primary;
				padding: 16px 0;
				width: 100%;
				position: absolute;
				bottom: 0;
				color: white;
				cursor: pointer;
				&:active {
					opacity: 0.5;
				}
			}
			.disableClass{
				opacity: 0.5;
				cursor: no-drop;
			}
		}
	}
}
</style>
